<template>
  <view class="service-list-page">
    <!-- 顶部导航栏 -->
    <view class="page-header">
      <view class="header-inner">
        <view class="back-btn" @click="handleBack">
          <u-icon name="arrow-left" color="#1f2937" size="18"></u-icon>
        </view>
        <text class="header-title">热门服务</text>
        <view class="search-btn" @click="handleSearch">
          <u-icon name="search" color="#1f2937" size="18"></u-icon>
        </view>
      </view>
    </view>

    <!-- 筛选栏 -->
    <view class="filter-bar">
      <scroll-view scroll-x class="filter-scroll" :show-scrollbar="false">
        <view class="filter-list">
          <view 
            v-for="(category, index) in filterCategories" 
            :key="index"
            :class="['filter-item', { 'active': selectedCategory === category.value }]"
            @click="handleCategoryChange(category.value)"
          >
            <text class="filter-text">{{ category.label }}</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 服务列表 -->
    <scroll-view scroll-y class="content-scroll">
      <view class="service-list">
        <view 
          v-for="service in filteredServices" 
          :key="service.id"
          class="service-item"
          @click="handleServiceClick(service)"
        >
          <view class="service-card">
            <!-- 顶部内容 -->
            <view class="card-top">
              <image :src="service.image" mode="aspectFill" class="service-image"></image>
              <view class="service-info">
                <text class="service-title">{{ service.title }}</text>
                <text class="service-desc">{{ service.desc }}</text>
                <view class="service-meta">
                  <view class="meta-left">
                    <view :class="['service-tag', getTagClass(service.tag)]">
                      <text class="tag-text">{{ service.tag }}</text>
                    </view>
                    <view class="views-count">
                      <u-icon name="eye" size="10" color="#6b7280"></u-icon>
                      <text class="views-text">{{ service.views }}</text>
                    </view>
                  </view>
                  <text class="service-price">¥{{ service.price }}</text>
                </view>
              </view>
            </view>

            <!-- 底部内容 -->
            <view class="card-bottom">
              <view class="user-info">
                <view class="info-item">
                  <u-icon name="account" size="10" color="#6b7280"></u-icon>
                  <text class="info-text">{{ service.user }}</text>
                </view>
                <view class="info-item">
                  <u-icon name="phone" size="10" color="#6b7280"></u-icon>
                  <text class="info-text">{{ service.phone }}</text>
                </view>
                <view class="info-item">
                  <u-icon name="clock" size="10" color="#6b7280"></u-icon>
                  <text class="info-text">{{ service.time }}</text>
                </view>
              </view>
              <view class="contact-btn" @click.stop="handleContact(service)">
                <text class="btn-text">联系我</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 底部安全区 -->
      <view class="safe-bottom"></view>
    </scroll-view>
    
    <!-- 发布弹窗 -->
    <PublishModal :show="showPublishModal" @close="showPublishModal = false" />
    
    <!-- 底部导航栏 -->
    <TabBar :current="1" @publish="showPublishModal = true" />
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { serviceCategories, tagColorMap } from '@/utils/constants'
import PublishModal from '@/components/yjyny/PublishModal.vue'
import TabBar from '@/components/yjyny/TabBar.vue'

// 筛选分类
const filterCategories = [
  { value: '', label: '全部' },
  ...serviceCategories
]

// 选中的分类
const selectedCategory = ref('')

// 发布弹窗
const showPublishModal = ref(false)

// 服务数据
const servicesData = ref([
  {
    id: 1,
    image: 'https://images.unsplash.com/photo-1625246333195-78d9c38ad449?w=120&h=120&fit=crop',
    title: '专业农机服务 - 耕地播种一站式',
    desc: '提供专业农机服务，包括耕地、播种、收割等全流程服务，设备先进，经验丰富',
    tag: '农机服务',
    price: '200/亩起',
    views: '1.2k',
    user: '张**',
    phone: '138****5678',
    time: '2小时前'
  },
  {
    id: 2,
    image: 'https://images.unsplash.com/photo-1574943320219-553eb213f72d?w=120&h=120&fit=crop',
    title: '现代化办公场地出租',
    desc: '位于城市中心，交通便利，配套完善，适合各类农业企业办公使用',
    tag: '办公场地',
    price: '3000/月起',
    views: '856',
    user: '李**',
    phone: '159****8765',
    time: '5小时前'
  },
  {
    id: 3,
    image: 'https://images.unsplash.com/photo-1579621970563-ebec7560ff3e?w=120&h=120&fit=crop',
    title: '农业金融贷款服务',
    desc: '专注农业领域的金融服务，利率优惠，审批快速，助力农业发展',
    tag: '金融贷款',
    price: '最高500万',
    views: '2.1k',
    user: '王**',
    phone: '186****2345',
    time: '1天前'
  },
  {
    id: 4,
    image: 'https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=120&h=120&fit=crop',
    title: '物流配送代办服务',
    desc: '专业的农产品物流配送服务，覆盖全国主要城市，保证时效和品质',
    tag: '物流代办',
    price: '按距离计费',
    views: '1.5k',
    user: '赵**',
    phone: '187****4321',
    time: '1天前'
  },
  {
    id: 5,
    image: 'https://images.unsplash.com/photo-1593113598332-cd288d649433?w=120&h=120&fit=crop',
    title: '农产品代销服务',
    desc: '帮助农户销售农产品，渠道广泛，价格优惠，让优质农产品走向市场',
    tag: '农产代销',
    price: '佣金10%',
    views: '980',
    user: '孙**',
    phone: '135****6789',
    time: '2天前'
  },
  {
    id: 6,
    image: 'https://images.unsplash.com/photo-1464226184884-fa280b87c399?w=120&h=120&fit=crop',
    title: '农业劳务派遣服务',
    desc: '提供专业的农业劳务人员，经验丰富，工作认真负责，解决用工难题',
    tag: '劳务派遣',
    price: '150/天起',
    views: '1.8k',
    user: '周**',
    phone: '177****9876',
    time: '3天前'
  }
])

// 过滤后的服务列表
const filteredServices = computed(() => {
  if (!selectedCategory.value) {
    return servicesData.value
  }
  return servicesData.value.filter(service => service.tag === selectedCategory.value)
})

// 获取标签样式类
const getTagClass = (tag) => {
  const colorKey = tagColorMap[tag] || 'primary'
  return `tag-${colorKey}`
}

// 事件处理
const handleBack = () => {
  uni.navigateBack()
}

const handleSearch = () => {
  uni.navigateTo({ url: '/pages/yjyny/search/index' })
}

const handleCategoryChange = (value) => {
  selectedCategory.value = value
}

const handleServiceClick = (service) => {
  uni.navigateTo({ url: `/pages/yjyny/service/detail?id=${service.id}` })
}

const handleContact = (service) => {
  uni.showModal({
    title: '联系方式',
    content: `联系人：${service.user}\n电话：${service.phone}`,
    showCancel: true,
    cancelText: '取消',
    confirmText: '拨打电话',
    success: (res) => {
      if (res.confirm) {
        uni.makePhoneCall({
          phoneNumber: service.phone.replace(/\*/g, '5')
        })
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.service-list-page {
  min-height: 100vh;
  background-color: #f9fafb;
}

// 顶部导航栏
.page-header {
  background-color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 2rpx solid #f3f4f6;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.header-inner {
  display: flex;
  align-items: center;
  padding: 24rpx 32rpx;
  gap: 24rpx;
}

.back-btn,
.search-btn {
  width: 64rpx;
  height: 64rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.back-btn:active,
.search-btn:active {
  background-color: #f3f4f6;
}

.header-title {
  flex: 1;
  font-size: 32rpx;
  font-weight: bold;
  color: #1f2937;
  text-align: center;
}

// 筛选栏
.filter-bar {
  background-color: #ffffff;
  border-bottom: 2rpx solid #f3f4f6;
  padding: 24rpx 0;
}

.filter-scroll {
  width: 100%;
  white-space: nowrap;
}

.filter-list {
  display: inline-flex;
  gap: 16rpx;
  padding: 0 32rpx;
}

.filter-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12rpx 32rpx;
  border-radius: 48rpx;
  background-color: #f3f4f6;
  transition: all 0.3s;
  flex-shrink: 0;
  
  &.active {
    background-color: #10b981;
    
    .filter-text {
      color: #ffffff;
      font-weight: 500;
    }
  }
}

.filter-text {
  font-size: 24rpx;
  color: #6b7280;
  white-space: nowrap;
}

// 内容滚动区
.content-scroll {
  height: calc(100vh - 200rpx);
}

// 服务列表
.service-list {
  padding: 24rpx 32rpx;
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.service-item {
  width: 100%;
}

.service-card {
  background-color: #ffffff;
  border-radius: 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  border: 2rpx solid #f3f4f6;
  padding: 32rpx;
  transition: all 0.3s;
}

.service-card:active {
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

// 卡片顶部
.card-top {
  display: flex;
  gap: 24rpx;
  margin-bottom: 24rpx;
}

.service-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 24rpx;
  flex-shrink: 0;
  background-color: #f3f4f6;
}

.service-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.service-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 16rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-desc {
  font-size: 24rpx;
  color: #6b7280;
  line-height: 1.5;
  margin-bottom: 16rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.service-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.meta-left {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.service-tag {
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  font-size: 22rpx;
  
  &.tag-primary {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
  }
  
  &.tag-secondary {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
  }
  
  &.tag-accent {
    background-color: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
  }
}

.tag-text {
  font-size: 22rpx;
}

.views-count {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.views-text {
  font-size: 22rpx;
  color: #6b7280;
}

.service-price {
  font-size: 28rpx;
  font-weight: bold;
  color: #10b981;
}

// 卡片底部
.card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24rpx;
  border-top: 2rpx solid #f3f4f6;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 32rpx;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.info-text {
  font-size: 22rpx;
  color: #6b7280;
}

.contact-btn {
  padding: 16rpx 32rpx;
  background-color: #10b981;
  border-radius: 16rpx;
  transition: opacity 0.3s;
}

.contact-btn:active {
  opacity: 0.8;
}

.btn-text {
  font-size: 24rpx;
  color: #ffffff;
}

// 底部安全区
.safe-bottom {
  height: 160rpx;
}
</style>
